import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core'
import { DataService } from '@shared/services/data.service'
import { Terminal } from '@shared/interfaces/terminal'
import { IBaseInfoColumn } from '@shared/interfaces/baseInfo'
import { I18NService } from '@core'

@Component({
  selector: 'app-terminal-detail-tab-receive-code',
  templateUrl: './tab-receive-code.component.html',
  styleUrls: ['./tab-receive-code.component.less'],
})
export class TerminalDetailTabReceiveCodeComponent implements OnInit {
  @ViewChild('qrCodeURLTpl') qrCodeURLTpl: TemplateRef<void>
  @ViewChild('qrCodeEMVTpl') qrCodeEMVTpl: TemplateRef<void>
  @ViewChild('qrBrand') qrBrand: TemplateRef<void>
  @ViewChild('emvBrand') emvBrand: TemplateRef<void>

  terminal: Terminal
  qrCodeURL: string // 微信、支付宝等 URL 类型的二维码数据
  qrCodeEMV: string // 银联、VISA等EMV标准的二维码数据

  URLColumns: Array<IBaseInfoColumn[]> = []
  EMVColumns: Array<IBaseInfoColumn[]> = []

  urlPaymentBrands: string[]
  emvPaymentBrands: string[]

  constructor(
    private dataService: DataService,
    private i18n: I18NService,
  ) {}

  ngOnInit() {
    this.dataService.terminal$.value$.subscribe(terminal => {
      this.terminal = terminal
      this.qrCodeURL = terminal.qr.qrCodeURL
      this.qrCodeEMV = terminal.qr.qrCodeEMV
      this.urlPaymentBrands = terminal.qr.urlPaymentBrands
      this.emvPaymentBrands = terminal.qr.emvPaymentBrands
      this.initColumns()
    })
  }

  initColumns(): void {
    const { qrCode } = this.terminal.qr
    if (this.qrCodeURL) {
      const firstColumns: IBaseInfoColumn[] = [
        {
          span: 8,
          disEditable: true,
          label: 'GENERAL.TERMINAL.QR_CODE.TYPE',
          labelI18n: 'GENERAL.TERMINAL.QR_CODE.TYPE',
          value: '聚合收款码',
          displayValue: this.trans('GENERAL.INFO.COLLECT_QR_CODE_POLYMER')
        },
        {
          span: 8,
          disEditable: true,
          label: 'GENERAL.TERMINAL.QR_CODE.CODE',
          labelI18n: 'GENERAL.TERMINAL.QR_CODE.CODE',
          value: qrCode || this.trans('GENERAL.INFO.NONE'),
        },
        {
          span: 8,
          label: 'GENERAL.INFO.CHANNEL',
          labelI18n: 'GENERAL.INFO.CHANNEL',
          disEditable: true,
          displayTemplate: this.qrBrand,
        },
      ]
      const secondColumns: IBaseInfoColumn[] = [
        {
          span: 24,
          label: 'GENERAL.TERMINAL.QR_CODE.URL',
          labelI18n: 'GENERAL.TERMINAL.QR_CODE.URL',
          disEditable: true,
          value: this.qrCodeURL,
        },
      ]
      this.URLColumns.push(firstColumns, secondColumns)
    }

    if (this.qrCodeEMV) {
      const firstColumns: IBaseInfoColumn[] = [
        {
          span: 8,
          disEditable: true,
          label: 'GENERAL.TERMINAL.QR_CODE.TYPE',
          labelI18n: 'GENERAL.TERMINAL.QR_CODE.TYPE',
          value: '统一收款码',
          displayValue: this.trans('GENERAL.INFO.COLLECT_QR_CODE_UNITY')
        },
        {
          span: 8,
          disEditable: true,
          label: 'GENERAL.TERMINAL.QR_CODE.CODE',
          labelI18n: 'GENERAL.TERMINAL.QR_CODE.CODE',
          value: qrCode || this.trans('GENERAL.INFO.NONE'),
        },
        {
          span: 8,
          label: 'GENERAL.INFO.CHANNEL',
          labelI18n: 'GENERAL.INFO.CHANNEL',
          disEditable: true,
          displayTemplate: this.emvBrand,
        },
      ]
      this.EMVColumns.push(firstColumns)
    }
  }

  trans(key: string, params?: Object): string {
    return this.i18n.fanyi(key, params)
  }
}
